<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>
<script src="jquery.jsonf.js" type="text/javascript"></script>

<!-- optional pretty printing -->
<script src="dependencies/bodurov.com/json.formatter.js" type="text/javascript"></script>
<link href="dependencies/bodurov.com/json.formatter.css" type="text/css" rel="stylesheet" />
<style>
.fifty {
	width: 48%;
	float: left;
	margin-right: 1em;
}
</style>
<script>
var input = {
	  "name": "Bob", 
	  "age": 40, 
	  "networth": 1000000.00, 
	  "mood": "snappy", 
	  "awesome": true,
	  "race": "alien",
	  "fun": false,
	  "bio": {
		"hobbies": [
		  "singing", 
		  "dancing"
		], 
		"education": {
		  "years": 122, 
		  "degrees": [
			{
			  "type": "BS", 
			  "concentration": "Undergraduate Studies"
			}, 
			{
			  "type": "MS", 
			  "concentration": "Pseudoscience"
			}, 
			{
			  "type": "MS", 
			  "concentration": "Sluffing"
			}, 
			{
			  "type": "PhD", 
			  "concentration": "Yawning"
			}
		  ]
		}
	  }, 
	  "hidden": "hidden field"
	};

</script>
</head>
<body>

<h4>JSONForms Live Demo</h4>
<p>Modify any field and when you move out of the field ("change" event), the JSON will update automatically.
After playing around a bit, view the source code: notice how the field names are very simple and the hierarchy
is specified entirely using the DOM parent structure. The one-liner that does all the work is:
<span style="font-family: monospace">var json = $('#myform').jsonf()</span>.
(<a href="http://code.google.com/p/jsonf/">Return to JSONForms</a>).</p>

<div class="fifty">

  <div id="myform">
	<p>Name: <input name="name" value="Joe">
	<p>Age: <span name="age" class="jsonf-output jsonf-integer"></span>
	<p>Born: <input name="born" class="jsonf-date" value="06/20/1969">
	<p>Net Worth: <input name="networth" class="jsonf-number" value="932343587.32">
	<p>Mood: <select id="mood" name="mood"><option/><option>groovy</option>
				<option>forlorn</option><option>snappy</option></select>
	<p><input id="awesome" name="awesome" class="jsonf-boolean" type="checkbox" value="true">
	   <label for="awesome">Awesome</label>
	<p>Race: <input id="race1" name="race" type="radio" value="human"> <label for="race1">Human</label>
	         <input id="race2" name="race" type="radio" value="alien"> <label for="race2">Alien</label>
	<p>Fun: <input id="fun1" name="fun" type="radio" class="jsonf-boolean" value="true"> <label for="fun1">Yes</label>
	         <input id="fun2" name="fun" type="radio" class="jsonf-boolean" value="false"> <label for="fun2">No</label>
	<div class="jsonf" name="bio">
		<h3>Bio</h3>
		Hobbies: <a class="addhobby" href="#">(add)</a>
		<ul class="jsonf-array" name="hobbies">
			<li class="jsonf-template"> <input value="">
		</ul>
		<fieldset class="jsonf" name="education">
			<legend>Education</legend>
			Total Years: <input name="years" class="jsonf-integer" value="16">
			<p>Degrees:  <a class="adddegree" href="#">(add)</a>
			<ol class="jsonf-array" name="degrees">
				<li class="jsonf jsonf-template"> <input name="type" value=""><input name="concentration" value="">
			</ol>
		</fieldset>
	</div>
	<p>Disabled: <input disabled name="disabled" value="disabled field">
	<p>Hidden: <input type="hidden" name="hidden" value="hidden field">
	<p><button id="submit">Submit</button>
  </div>

</div>

<div id="output" class="fifty"></div>
</div>

<script>
  $(document).ready(function(){
	$('#myform').jsonf('load', input);
	function printform() {
		var json = $('#myform').jsonf();
		$('#output').prettyjson(json);
	};
	$('#myform').change(printform);
	$('#submit').click(printform);
	printform();
	
	$('.addhobby').click(function(){
		$('.jsonf-array[name=hobbies]').jsonf('add');
		return false;
	});
	$('.adddegree').click(function(){
		$('.jsonf-array[name=degrees]').jsonf('add');
		return false;
	});
  });
</script>

</body>
</html>